<template>
  <div class="main-app">
    <el-row style="margin-top: 10px">
      <el-form ref="form" :model="form" :rules="rules" label-width="600px">
        <el-col :span="15">
          <el-form-item label="虚拟卡号:" required prop="virtualCard">
            <el-input v-model="form.virtualCard" />
          </el-form-item>
          <el-form-item label="姓名:" required prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="手机:" required prop="phone">
            <el-input v-model="form.phone" />
          </el-form-item>

          <el-form-item label="角色:" required prop="roleId">
            <el-select v-model="form.roleId" placeholder="请选择角色" style="width: 100%;">
              <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="性别:" required>
            <el-radio-group v-model="form.sex">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="是否在职:" required>
            <el-radio-group v-model="form.disabled">
              <el-radio :label="0">在职</el-radio>
              <el-radio :label="1">离职</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <el-row style="margin-top: 40px; text-align: center">
      <el-form :inline="true" class="form-inline">
        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import {
  addUsers,
  getUserInfoById
} from "../../api/user.js";
import {
  GetAllRolesAsync
} from '../../api/role.js';
export default {
  props: {
    id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      Guid: "",

      tableData: [],
      number: 0,
      weight: 0,
      form: {
        sex: 0,
        disabled: 0,
      },
      roleList: [],
      rules: {
        name: [{
          required: true,
          message: "请输入用户姓名",
          trigger: "blur",
        }],
        virtualCard: [{
          required: true,
          message: "请输入虚拟卡号",
          trigger: "blur",
        }],
        phone: [{
          required: true,
          message: "请输入手机号",
          trigger: "blur",
        }],
        role: [{
          required: true,
          message: "请选择角色",
          trigger: "change",
        }],
      },
    };
  },

  async created() {
    const {
      userid,
      id
    } = this.$route.params;
      // 组织id
    this.id = id;
    await this.GetAllRolesAsync();
    await this.getUserInfoById(userid);
    // 用户id
    this.Guid = userid;
    console.log("用户ID：", this.Guid);
  },

  methods: {
    async GetAllRolesAsync() {
      var parmas = {
        searchParam: JSON.stringify({
          OrgGuid: this.id
        })
      }
      const {
        data
      } = await GetAllRolesAsync(parmas);

      if (data) {
        this.roleList = data;
      }
    },
    async getUserInfoById(Guid) {
      const {
        data
      } = await getUserInfoById(Guid);
      if (data) {
        data.sex = parseInt(data.sex);
        if (data.sex !== 1) {
          data.sex = 0;
        }
        data.status = parseInt(data.status);
        data.roleId = parseInt(data.roleId);
        this.form = data;

        this.form.sex = Number(data.sex);
      }
    },

    save() {
      // 校验必填项
      this.$refs["form"].validate(async(valid) => {
        if (valid) {
          var role = {};

          var roles = this.roleList.find(item => {
            return item.id === this.form.roleId
          })
          if (roles) {
            role = roles;
          } else {
            role = this.roleList[0]
          }

          // 校验成功
          let data = {
            Name: this.form.name,
            Sex: this.form.sex.toString(),
            Phone: this.form.phone,
            RoleId: role.id.toString(),
            RoleCode: role.code,
            Status: 10,
            VirtualCard: this.form.virtualCard,
            Disabled: this.form.disabled,
            OrgGuid: this.id,

          };

          let message = "";
          if (!this.Guid) {
            message = "用户新增成功";
          } else {
            data = Object.assign({
              Guid: this.Guid
            }, data);
            message = "用户修改成功";
          }
          console.log("提交的数据：", data);
          const {
            success,
            msg
          } = await addUsers(data);

          if (success) {
            this.$notify({
              title: "成功",
              message: message,
              type: "success",
              duration: 3000,
            });
            this.cancel();
          } else {
            this.$notify.error({
              title: "失败",
              message: msg,
              duration: 3000,
            });
          }
        }
      });
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>
